<template>
  <h2>HTTP-API请求</h2>
  <div class="note">
    <p>get: 获取数据</p>
    <p>post: 添加数据</p>
    <p>put: 修改数据</p>
    <p>patch: 修改单个字段</p>
    <p>delete: 删除数据</p>
  </div>
  <div class="group">
    <button @click="getRolesPageHandler">get-角色分页列表</button>
    <button @click="postRolesHandler ">post-新增角色</button>
    <button @click="putRolesRoleId">put-修改角色</button>
    <button @click="deleteRolesIds">delete-删除角色</button>
    <button @click="patchRolesRoleIdStatus">patch-修改角色状态</button>
  </div>
  <div class="group">
    <ul>
      <li v-for="item in roles" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import {
  getRolesPage,
  postRoles,
  putRolesRoleId,
  deleteRolesIds,
  patchRolesRoleIdStatus
} from '@/service/study1/demo1'

const roles = ref([])

// 角色分页列表
const getRolesPageHandler = async () => {
  const resJson = await getRolesPage()
  roles.value = resJson.data.list
}

// 新增角色
const postRolesHandler = async () => {
  const resJson = await postRoles()
  console.log(resJson, 'resJson')
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
